import * as React from 'react';
import { View, Text, StyleSheet, ImageBackground, Image, } from 'react-native';

interface IMeTopCardProps {
  onLoginPress(): any,
  onRegisterPress(): any
  dataSource: {
    hasLogin: false,
    loginTime: '',
    desc: '',
    phone: '',
  }
}

class MeTopCard extends React.Component<IMeTopCardProps> {

  constructor(props) {
    super(props);
  
  }
  renderCardContent = () => {
    const { hasLogin, phone, loginTime } = this.props.dataSource;
    console.log('TAGGG', "===MeTopCard==renderCardContent====hasLogin==" + hasLogin + '==phone==' + phone + '===loginTime===' + loginTime)
    if (hasLogin) {
      const uri = 'http://120.48.109.211:8088/static/icon/avatar.png';
      return (
        <View style ={styles.loginedContainer}>
          <Image resizeMode="contain" style={styles.avatar} source={{ uri, }} />
          <View style={styles.userInfoContainer}>
            <Text style={styles.textDesc}>{'Hi,  ' + phone}</Text>
            <Text style={styles.textUserInfo}>预留信息: 暂无</Text>
            <Text style={styles.textUserInfo}>{'登陆时间:  ' + loginTime}</Text>
          </View>
        </View>
      );
    }
    return (
      <View style={styles.openAccountWrapper}>
        <Text style={styles.textDesc}>欢迎来到 Payment</Text>
        <Text style={styles.textCommon}>您的专业境外个人银行</Text>
        <View style={styles.loginAndRegContainer}>
          <Text 
            style={styles.loginBtn}
            onPress={() => {
              this.props.onLoginPress();
            }}
          >登录</Text>
          <Text 
            style={styles.registerBtn}
            onPress={() => {
              this.props.onRegisterPress();
            }}
          >注册</Text>
        </View>
      </View>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <ImageBackground
          style={styles.imageBkg}
          imageStyle={styles.imageBkg}
          source={{ uri: 'http://120.48.109.211:8088/static/icon/home.png', }}
        >
          {this.renderCardContent()}
        </ImageBackground>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    margin: 0,
  },
  loginedContainer: {
    flexDirection: 'row'
  },
  userInfoContainer: {
    marginLeft: 20,
    marginTop: 20,
  },
  openAccountWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: 5,
  },
  imageBkg: {
    height: 140,
    padding: 15,
    borderRadius: 10,
  },
  textCommon: {
    color: "#FFFFFF",
    fontSize: 14,
    marginBottom: 10,
  },
  textDesc: {
    color: "#FFFFFF",
    fontSize: 18,
    marginBottom: 10,
  },
  textUserInfo: {
    color: "#FFFFFF",
    fontSize: 12,
    marginBottom: 10,
  },
  loginBtn: {
    textAlign: 'center',
    color: "#1E90FF",
    backgroundColor: "#FFFFFF",
    width: 100,
    borderRadius: 8,
    paddingTop: 6,
    paddingBottom: 6,
    fontSize: 14,
    marginTop: 5,
    marginRight: 8,
  },
  registerBtn: {
    textAlign: 'center',
    color: "#1E90FF",
    backgroundColor: "#FFFFFF",
    width: 100,
    borderRadius: 8,
    marginLeft: 8,
    paddingTop: 6,
    paddingBottom: 6,
    fontSize: 14,
    marginTop: 5,
  },
  loginAndRegContainer: {
    flexDirection: 'row'
  },
  avatar: {
    width: 60,
    height: 60,
    marginLeft: 0,
    marginTop: 30,
  },
});

export default MeTopCard